<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4096 Color Wheel Version 2.1</title>
<!-- 4096 Color Wheel Version 2.1  by Jemima Pereira -->
<!-- http://jemimap.ficml.org/style/color/wheel.html -->

<!-- 2.1:  Improved unsafe to smart conversion,         -->
<!--       added keyboard navigation             (4/04) --> 
<!-- 2.0:  Converted to HSV to get the greys     (4/04) -->
<!-- 1.4:  Added optional 3-color list           (2/04) -->
<!-- 1.31: Added navigation, translation         (2/04) -->
<!-- 1.3:  Switched to png, reversed direction   (7/03) -->
<!-- 1.2:  Added picks list, cleaned up style    (7/03) -->
<!-- 1.1:  Added Web-safe colors                 (7/03) -->
<!-- 1.0:  Added Mozilla compatibility                  -->
<!--       Restricted output to the 4096 colors  (7/03) -->


<script LANGUAGE="JavaScript">
 var defaultNum = 0;
 var defaultColor ='#FFFFFF';

 var pos = window.location.href.indexOf('?');
  if (pos > 0)
  {
    var str = window.location.href.substring(pos+1);
    var args = str.split('&');
    for (var i = 0; i < args.length; i++)
    {
      if (args[i].substring(0,6) == 'color=')
        defaultColor = args[i].substring(6);
      else if (args[i].substring(0,2) == 'n=')
        defaultNum = parseInt(args[i].substring(2));      
    }
  }


hue = 60;
adeg = 60;
sat = 1;
val = 1;
squarecolor = "#ffff00"; //starting hue
pickindex = 0;
selectedColor = '';
threec = new Array("#666666", "#555555", "#545657"); // the three colors
//prevc = threec[2];
//picary = new Array("picka", "pickb", "pickc", "pickd", "picke", "pickf", "pickg");
//initary = new Array("#444444", "#777777", "#aaaaaa",  "#bbbbbb", "#cccccc", "#dddddd", "#eeeeee");

// code from Browser Detect Lite  v2.1
// http://www.dithered.com/javascript/browser_detect/index.html
// modified by Chris Nott (chris@NOSPAMdithered.com - remove NOSPAM)
// modified by Michael Lovitt to include OmniWeb and Dreamcast
// modified by Jemima Pereira to detect only relevant browsers

function BrowserDetectXLite() {
	var ua = navigator.userAgent.toLowerCase(); 
	this.ua = ua;

	// browser name
	this.isIE        = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) ); 
        this.isSafari      = (ua.indexOf('safari') != - 1);

	// browser version
	this.versionMinor = parseFloat(navigator.appVersion); 
	
	// correct version number for IE4+ 
	if (this.isIE && this.versionMinor >= 4) {
		this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
	}
	
	this.versionMajor = parseInt(this.versionMinor); 
	
	// platform
	this.isWin   = (ua.indexOf('win') != -1);
	this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1) );
	this.isMac   = (ua.indexOf('mac') != -1);

	this.isIE4x = (this.isIE && this.versionMajor == 4);
	this.isIE4up = (this.isIE && this.versionMajor >= 4);
	this.isIE5x = (this.isIE && this.versionMajor == 5);
	this.isIE55 = (this.isIE && this.versionMinor == 5.5);
	this.isIE5up = (this.isIE && this.versionMajor >= 5);
	this.isIE6x = (this.isIE && this.versionMajor == 6);
	this.isIE6up = (this.isIE && this.versionMajor >= 6);
	
	this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetectXLite();
//end of browser detector


//fix for IE's png stupidity
function deMoronize() {//now the onload function
// detect moronic browsers
  if (!((browser.isIE55 || browser.isIE6up) && browser.isWin32)) {
     // demoronize div#wheel image if browser is non-moronic
     thesmartversion = "<a href='javascript://' onclick='javascript:pickColor(); return false;'><img src='hsvwheel.png' alt='color wheel' width='553' height='257' border='0'></a>";
  document.getElementById("wheel").innerHTML = thesmartversion;
  }
  // keypress stuff
  if (browser.isSafari) document.onkeypress = rotate; //safari repeat
  else document.onkeydown = rotate;
  // start capturing the mouse
  capture();
  
   	document.getElementById("SelectColorTxt").value = defaultColor;
  
	  if (document.layers) {
	     document.layers["SelectColor"].bgColor = defaultColor;
	  } else if (document.all) {
	     document.all["SelectColor"].style.backgroundColor = defaultColor;
	  } else if (document.getElementById) {
	     document.getElementById("SelectColor").style.backgroundColor = defaultColor;
	  }
}

// HSV conversion algorithm adapted from easyrgb.com
function hsv2rgb(Hdeg,S,V) {
  H = Hdeg/360;     // convert from degrees to 0 to 1
  if (S==0) {       // HSV values = From 0 to 1
    R = V*255;     // RGB results = From 0 to 255
    G = V*255;
    B = V*255;}
  else {
    var_h = H*6;
    var_i = Math.floor( var_h );     //Or ... var_i = floor( var_h )
    var_1 = V*(1-S);
    var_2 = V*(1-S*(var_h-var_i));
    var_3 = V*(1-S*(1-(var_h-var_i)));
    if (var_i==0)      {var_r=V ;    var_g=var_3; var_b=var_1}
    else if (var_i==1) {var_r=var_2; var_g=V;     var_b=var_1}
    else if (var_i==2) {var_r=var_1; var_g=V;     var_b=var_3}
    else if (var_i==3) {var_r=var_1; var_g=var_2; var_b=V}
    else if (var_i==4) {var_r=var_3; var_g=var_1; var_b=V}
    else               {var_r=V;     var_g=var_1; var_b=var_2}
    R = Math.round(var_r*255);   //RGB results = From 0 to 255
    G = Math.round(var_g*255);
    B = Math.round(var_b*255);
  }
  return new Array(R,G,B);
}

function rgb2hex(rgbary) {
  cary = new Array; 
  cary[3] = "#";
  for (i=0; i < 3; i++) {
    cary[i] = parseInt(rgbary[i]).toString(16);
    if (cary[i].length < 2) cary[i] = "0"+ cary[i];
    cary[3] = cary[3] + cary[i];
    cary[i+4] = rgbary[i]; //save dec values for later
  }
  // function returns hex color as an array of three two-digit strings
  // plus the full hex color and original decimal values
  return cary;
}

function webRounder(c,d) {//d is the divisor
  //safe divisor is 51, smart divisor is 17 
  thec = "#";
  for (i=0; i<3; i++) {
      num = Math.round(c[i+4]/d) * d; //use saved rgb value
      numc = num.toString(16);
      if (String(numc).length < 2) numc = "0" + numc;
      thec += numc;
  }
  return thec;
}

function hexColorArray(c) { //now takes string hex value with #
    threec[2] = c[3];
    threec[1] = webRounder(c,17);
    threec[0] = webRounder(c,51);
    return false;
}

function capture() {
 hoverColor();
 if(document.layers) {
  layobj = document.layers['wheel'];
  layobj.document.captureEvents(Event.MOUSEMOVE);
  layobj.document.onmousemove = mouseMoved;
 }
 else if (document.all) {
  layobj = document.all["wheel"];
  layobj.onmousemove = mouseMoved;
   }
 else if (document.getElementById) {
  window.document.getElementById("wheel").onmousemove = mouseMoved;
 }
}

function greyMoved(x,y) {
    adeg = hue;
    xside = (x<=553)?x - 296:256;
    yside = (y<=256)?y:256;
    sat = xside/256;
    val = 1 - (yside/256);
    c = rgb2hex(hsv2rgb(hue,sat,val));
    hexColorArray(c);
    hoverColor();
    return false;
}

function mouseMoved(e) {
 if (document.layers) {
  x = e.layerX;
  y = e.layerY;
 }
 else if (document.all) {
  x = event.offsetX;
  y = event.offsetY;
 }
 else if (document.getElementById) {
  x = (e.pageX - document.getElementById("wheel").offsetLeft);
  y = (e.pageY - document.getElementById("wheel").offsetTop);
 }
 if (x >= 296) {//
 	greyMoved(x,y);
   return false;}
 if (y > 256) {return false;}

    cartx = x - 128;
    carty = 128 - y;
    cartx2 = cartx * cartx;
    carty2 = carty * carty;
    cartxs = (cartx < 0)?-1:1;
    cartys = (carty < 0)?-1:1;
    cartxn = cartx/128;                      //normalize x
    rraw = Math.sqrt(cartx2 + carty2);       //raw radius
    rnorm = rraw/128;                        //normalized radius
    if (rraw == 0) {
      sat = 0;
      val = 0;
      rgb = new Array(0,0,0);
      }
    else {
      arad = Math.acos(cartx/rraw);            //angle in radians 
      aradc = (carty>=0)?arad:2*Math.PI - arad;  //correct below axis
      adeg = 360 * aradc/(2*Math.PI);  //convert to degrees
      if (rnorm > 1) {    // outside circle
            rgb = new Array(255,255,255);
            sat = 1;
            val = 1;            
            }
      //else rgb = hsv2rgb(adeg,1,1);
            else if (rnorm >= .5) {
	      sat = 1 - ((rnorm - .5) *2);
              val = 1;
	      rgb = hsv2rgb(adeg,sat,val);
	      }
              else {
                   sat = 1;
	      	   val = rnorm * 2;
	      	   rgb = hsv2rgb(adeg,sat,val);}
   }
   c = rgb2hex(rgb);
   hexColorArray(c);
   hoverColor();
   return false;
}

function hoverColor() {
 if (document.layers) {
  // document.layers["wheel"].bgColor = threec[1];
  document.layers["demoa"].bgColor = threec[0];
  document.layers["demob"].bgColor = threec[1];
  document.layers["democ"].bgColor = threec[2];
  document.layers["demoa"].document.cccform.ccc.value = threec[0];
  document.layers["demob"].document.aaaform.abc.value = threec[1];
  document.layers["democ"].document.abcform.abc.value = threec[2];
 } else if (document.all) {
  // document.all["wheel"].style.backgroundColor = threec[1];
  document.all["demoa"].style.backgroundColor = threec[0];
  document.all["demob"].style.backgroundColor = threec[1];
  document.all["democ"].style.backgroundColor = threec[2];
  document.all["demoa"].document.cccform.ccc.value = threec[0];
  document.all["demob"].document.aaaform.aaa.value = threec[1];
  document.all["democ"].document.abcform.abc.value = threec[2];
 } else if (document.getElementById) {
  // document.getElementById("wheel").style.backgroundColor = threec[1];
  document.getElementById("demoa").style.backgroundColor = threec[0];
  document.getElementById("demob").style.backgroundColor = threec[1];
  document.getElementById("democ").style.backgroundColor = threec[2];
  document.cccform.ccc.value = threec[0];
  document.aaaform.aaa.value = threec[1];
  document.abcform.abc.value = threec[2];
 }

  document.getElementById("democ").style.backgroundColor = threec[2];
  document.cccform.ccc.value = threec[0];
  document.aaaform.aaa.value = threec[1];
  document.abcform.abc.value = threec[2];
 return false;
}

function pickColor() {
  selectedColor = threec[0];
  document.getElementById("SelectColorTxt").value = threec[0];
  
  if (document.layers) {
     document.layers["SelectColor"].bgColor = threec[0];
  } else if (document.all) {
     document.all["SelectColor"].style.backgroundColor = threec[0];
  } else if (document.getElementById) {
     document.getElementById("SelectColor").style.backgroundColor = threec[0];
  }
  
  setSquare(adeg);
  return false;
 
}

function setSquare(deg) {
  hue = deg;
  adeg = deg;
  c = rgb2hex(hsv2rgb(hue,1,1));
  squarecolor = c[3];
  if (document.layers) {
     document.layers["wheel"].bgColor = squarecolor;
  } else if (document.all) {
     document.all["wheel"].style.backgroundColor = squarecolor;
  } else if (document.getElementById) {
     document.getElementById("wheel").style.backgroundColor = squarecolor;
  }
}

// keyboard tricks adapted from
// http://www.ipwebdesign.net/kaelisSpace/useful_keypress.html
// see also http://sniptools.com/jskeys

function rotate(e) {
    if (!e) e = window.event;
    var key = (typeof e.which == 'number')?e.which:e.keyCode;
    }


//  End -->
</script>


<style type="text/css">
body {font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode", sans-serif;
      font-size: 16px;}

h1 {position:absolute; visibility:visible; top:30px; left:50px;

font-size: 24px;}

div#wheel {position:absolute; visibility:visible; top:0; left:0;
width: 553px; height: 257px; background: #ffff00;}

div#demoa, div#demob, div#democ {
   position:absolute; visibility:visible;
   top:300px; width: 90px; height: 90px;
   text-align:center; padding-top: 15px; padding-bottom: 10px;
   font-size: 14px; font-family: serif;} 
div#demoa {left:10px; margin-right: 0px;}
div#demob {left:100px; margin-left: 0px;  margin-right: 0px;}
div#democ {left:190px; margin-left: 0px;}

div#pickset {
   position:absolute; visibility:visible; top:220px; left:50px;
   padding-right: 35px; border-right: 1px dotted grey;
   font-size: 14px; font-family: Courier, monospace;}
div#picks {padding-left: 10px;}
div#picka, div#pickb, div#pickc, div#pickd, div#picke, div#pickf, div#pickg {
   width: 200px; height: 40px; padding: 10px;}

div#notes {position:absolute; visibility:visible; top:650px;
    left:50px; padding-top: 30px; font-size: 12px; width: 270px;}

div#instructs {
     position:absolute; visibility:visible; top:80px;
     left:50px;  padding-bottom: 30px; width: 270px;}

div#showhide {
     position:absolute; visibility:visible; top:300px; left:280px;
     padding-left: 35px; padding-right: 5px; width: 270px;}
div#fulllist {
     position:absolute; visibility:visible; top:50px; left:935px;
     padding-left: 25px; padding-right: 5px; display: none; 
     white-space: nowrap; border-left: 1px dotted grey;
     font-size: 14px; font-family: Courier, monospace;} 

div#showhide span {text-decoration: underline;}

div#watermark {position:absolute; visibility:visible; top:5px; 
left:5px; width: 553px; white-space: nowrap;
font-family: "Trebuchet MS", Skia, "Lucida Sans Unicode",
sans-serif; font-size: 10px; color: #cecece;}

.btxt {color: #000000;}
.wtxt {color: #ffffff;}

</style>
</head>

<body onLoad="deMoronize();">

<!-- in the middle, the wheel and display -->

<div id="wheel"><a href="javascript://" onClick="javascript:pickColor(); return false;"><img alt="color wheel (hsv)" src="blank.gif" style="width: 553px;height: 257px; border: 0; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hsvwheel.png', sizingMethod='scale')" /></a></div>

<div id="demoa">
<form name="cccform">
<input type="text" name="ccc" size="8">
</form>
<span class="btxt">web-safe</span><br>
<span class="wtxt">web-safe</span></div>

<div id="demob">
<form name="aaaform">

<input type="text" name="aaa" size="8">
</form>
<span class="btxt">web-smart</span><br>
<span class="wtxt">web-smart</span></div>

<div id="democ">
<form name="abcform">
<input type="text" name="abc" size="8">
</form>
<span class="btxt">unsafe</span><br>
<span class="wtxt">unsafe</span></div>

<div id="showhide">

选中的颜色：<br>

<input type="text" id="SelectColorTxt" name="color">
<br>
<div id="SelectColor" style="width:100px;height:20px;"></div>
<br>
<input type="button" value="确定" onclick="Ok();"><input type="button" value="取消" onclick="window.close();">
<script>
function Ok()
{
  if (typeof window.opener != 'undefined')
  {
    window.opener.TOI_setColor(defaultNum, selectedColor);
  }
  else
  {
    window.returnValue = selectedColor;
  }
  window.close();
  return true ;
}

</script>
</div>

</body>
</html>